import { Box, Grid, GridItem, LoadingPlaceholder } from '@nova-hf/ui';
import React from 'react';

export const StillingarLoader = () => {
  return (
    <Box paddingY={5} paddingLeft={9} paddingRight={5}>
      <Grid gridTemplate={{ sm: 6, md: 12 }} rowGap={2}>
        <GridItem gridColumn={{ sm: 'span6' }}>
          <LoadingPlaceholder height={2} width="3/12" />
        </GridItem>
        <GridItem gridColumn={{ sm: 'span6' }}>
          <LoadingPlaceholder height={2} width="3/12" />
        </GridItem>
        <GridItem gridColumn={{ sm: 'span6' }}>
          <LoadingPlaceholder height={4} width="8/12" />
        </GridItem>
        <GridItem gridColumn={{ sm: 'span6' }}>
          <LoadingPlaceholder height={4} width="6/12" />
        </GridItem>
        <GridItem gridColumn={{ sm: 'span6' }}>
          <LoadingPlaceholder height={2} width="3/12" />
        </GridItem>
        <GridItem gridColumn={{ sm: 'span6', md: 'span4' }} />
        <GridItem gridColumn={{ sm: 'span6' }}>
          <LoadingPlaceholder height={4} width="8/12" />
        </GridItem>
        <GridItem gridColumn={{ sm: 'span6', md: 'span4' }} />
      </Grid>
    </Box>
  );
};